import React, { FormEvent } from 'react'
import {useAuth} from 'context/auth-context'
//interface Base{
//     id:number
// }
// interface Advanced extends Base{
//     name:string
// }
// const test = (p:Base) => {

// }
//  鸭子类型：面向接口编程而不是面向对象
// const a = {id:1, name:'sd'}
// test(a)

//const apiUrl = process.env.REACT_APP_API_URL
export default function LoginScreen() {
    const {login,user} = useAuth()

    const handleSubmit = (e:FormEvent<HTMLFormElement>)=>{
        e.preventDefault()
        const username = (e.currentTarget.elements[0] as HTMLInputElement).value
        const password = (e.currentTarget.elements[1] as HTMLInputElement).value
        login({username, password})
    }
  return <form onSubmit={handleSubmit}>
      {/* 登录成功，用户名：{user?.name}
      token:{user?.token} */}
      <div>
          <label htmlFor="username">用户名</label>
          <input type="text" id={'username'} placeholder="请输入用户名"/>
      </div>
      <div>
          <label htmlFor="password">密码</label>
          <input type="password" id={'password'} placeholder="请输入用户密码"/>
      </div>
      <button type="submit" >登录</button>
  </form>
}
